<template>
  <div class="home">
    <!-- <gltitle
        :is_mt="true"
        :is_notice="false"
        :is_back="true"
        :is_name="true"
        :title="title"
        :is_right="true"
        :titleRight="titleRight"
        @preserve="path_url('/my/lang')"
    ></gltitle> -->

    <van-sticky>
      <div class="head">
        <div class="container">
          <div class="db">
            <div class="logo"><img @click="retreat()" src="@/assets/images/Group1_1.png" alt=""></div>
            <!--          <div class="lang" @click="path_url('/user/login')">{{ $t('page1.doc23') }}</div>-->
          </div>
        </div>
      </div>
    </van-sticky>

    <div class="container">
      <div class="box1"></div>
      <div class="logo">
        <div class="title">{{ $t('page1.doc24') }}<div class="bot"></div></div>
        <div class="box3">
          <div>{{ $t('page1.记住密码') }}</div>
          <div>{{ $t('page1.通过验证，重新设置密码。') }}</div>
        </div>
        <ul>
          <li>
<!--            <div class="name">{{ $t('page1.doc72') }}</div>-->
            <div class="input">
              <input type="text" :placeholder="$t('page1.doc65')" v-model="mobile">
            </div>
          </li>
          <li>
<!--            <div class="name">{{ $t('page1.doc27') }}</div>-->
            <div class="input">
              <div class="in">
                <input type="text" :placeholder="$t('page1.doc28')" v-model="code">
              </div>
              <div class="str" v-if="!time_show" @click="send_click()">
                {{ $t('page1.doc29') }}
              </div>
              <div class="str" v-show="time_show" >
                <van-count-down ref="countDown" :time="time"  format="ss" @finish='finish_time'>
                  <template v-slot="timeData">
                    <span>{{ timeData.seconds }} <var>s</var></span>
                  </template>
                </van-count-down>
              </div>
            </div>
          </li>
          <li>
<!--            <div class="name">{{ $t('page1.doc30') }}</div>-->
            <div class="input">
              <input type="password" :placeholder="$t('page1.doc31')" v-model="password">
            </div>
          </li>
        </ul>
        <div class="flex justify-center">
          <button class="btn" @click="onBtn()" :disabled="isDisable">{{ $t('page1.doc32') }}</button>
        </div>
        <!-- <div class="footer_label">Copyright <span>©️</span> 2023</div> -->
      </div>
    </div>

    <!-- <div class="container">
      <div class="box db">
        <div class="flexs">
          <ul>
            <li class="db">
              <div class="area_name" @click="if_area = true">+{{ areaId }} <van-icon name="arrow-down" /></div>
              <div class="flexs">
                <input type="text" :placeholder="$t('page.doc35')" v-model="mobile">
              </div>
            </li>
            <li class="db">
              <div class="flexs">
                <input type="text" :placeholder="$t('page.doc36')" v-model="code">
              </div>
              <div class="str" v-if="!time_show" @click="send_click()">
                {{ $t('page.doc37') }}
              </div>
              <div class="str" v-show="time_show" >
                <van-count-down ref="countDown" :time="time"  format="ss" @finish='finish_time'>
                  <template v-slot="timeData">
                    <span>{{ timeData.seconds }} <var>s</var></span>
                  </template>
                </van-count-down>
              </div>
            </li>
            <li class="db">
              <div class="flexs">
                <input type="password" :placeholder="$t('page.doc38')" v-model="password">
              </div>
            </li>
            <li class="db">
              <div class="flexs">
                <input type="password" :placeholder="$t('page.doc39')" v-model="s_password">
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="bottom">
        <div class="go">
          <button class="btn" @click="onBtn()">{{ $t('page.doc40') }}</button>
        </div>
      </div>
    </div> -->


    <van-popup v-model="if_area" position="bottom" round>
      <div class="area_pop">
        <div class="title rel">
          {{ $t('page.doc41') }}
          <div class="abs" @click="if_area = false">
            <van-icon name="cross" />
          </div>
        </div>
        <div class="so db">
          <div class="ico"></div>
          <div class="flexs">
            <input
                type="text"
                :placeholder="$t('page.doc42')"
                v-model="soAreaId"
            />
          </div>
          <div
              class="closes"
              v-if="soAreaId != ''"
              @click="soAreaId = ''"
          >
            <img src="../../assets/images/ico_close.png" alt="" />
          </div>
        </div>
        <ul>
          <li
              class="db"
              v-for="(item, k) in searchResult"
              :key="k"
              @click="area_set(item.mobilePrefix)"
          >
            <div class="ico">
              <img :src="item.iconUrl" alt="" />
            </div>
            <div class="flexs txt">
              {{ item.name }}（+{{ item.mobilePrefix }}）
            </div>
          </li>
        </ul>
      </div>
    </van-popup>

  </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters } from 'vuex'
import { antiShake } from '@/utils/fun.js'; //防抖
const phoneReg = /^1[3-578]\d{9}$/ //大陆手机验证
const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
const mailReg = /^(\w-*\.*\+*)+@(\w-?)+(\.\w{2,})+$/ //邮箱验证

export default {
  data() {
    return {
      title: '',
      titleRight:
          '<img src=' +
          require('../../assets/images/ico_lang.png') +
          '>' +
          this.$t('page.doc43'),

      tabData: [
        { name: this.$t('page.doc95'), cid: 1 },
        { name: this.$t('page.doc94'), cid: 0 },

      ],
      cid: 1,

      areaId: '44',
      phone: '',
      mobile:'',
      email:'',
      cap: '',
      code: '',
      invateCode: '',
      password: '',
      s_password: '',

      areaData: [],
      if_area: false,

      time: 60 * 1000,
      time_show: false,
      time_status: false,
      checked: true,

      registration_data: {
        pwdType: 'password',
      },
      isDisable: false,

      soAreaId: '',
      isUa: '',
    }
  },
  computed: {
    searchResult() {
      if (this.soAreaId != '') {
        return this.areaData.filter(
            (item) => item.mobilePrefix.indexOf(this.soAreaId) > -1
        )
      } else {
        return this.areaData
      }
    },
  },
  watch: {
    soAreaId: {
      immediate: true, //在框的值还没变化时执行如下函数显示出所有的情况
      handler(val) {
        this.code_data = this.areaData.filter((p) => {
          return p.mobilePrefix.indexOf(val) !== -1
        })
      },
    },
  },
  mounted() {
    this.getArea()
    window.getIsApp = this.getIsApp

    if (this.common.getPlatform == 'IOS') {
      try {
        window.webkit.messageHandlers.getIsApp.postMessage(
            JSON.stringify(json)
        )
        if (this.isUa) {
          this.SET_ISAPPINFO(true)
        }
      } catch (error) {
        console.log('ios error')
      }
    } else {
      try {
        this.isUa = window.android.getIsApp()
        if (this.isUa) {
          this.SET_ISAPPINFO(true)
        }
      } catch (error) {
        console.log('Android error')
      }
    }

    if (this.$route.query.inviteCode != undefined) {
      this.invateCode = this.$route.query.inviteCode
    }
    if (localStorage.getItem('mobile')) {
      this.mobile = localStorage.getItem('mobile')
    }
    if (localStorage.getItem('email')) {
      this.phone = localStorage.getItem('email')
    }
    if (localStorage.getItem('areaId')) {
      this.areaId = localStorage.getItem('areaId')
    }
    if (localStorage.getItem('invateCode')) {
      this.invateCode = localStorage.getItem('invateCode')
    }
  },

  methods: {
    ...mapMutations([
      'SET_USERDATA',
      'SET_TOKEN',
      'SET_LOGIN',
      'SET_MOBILE',
      'SET_EMAIL',
      'SET_AREAID',
    ]),
    ...mapActions(['Get_userData']),

    retreat(){
      this.$router.go(-1)
    },
    changeType() {
      this.registration_data.pwdType =
          this.registration_data.pwdType === 'password'
              ? 'text'
              : 'password'

    },

    onTab(item) {
      this.cid = item.cid
    },

    finish_time() {
      this.time_status = false
      this.time_show = false
    },
    send_click() {
      if (this.time_status) {
        this.$toast.success(this.$t('page.doc44'))
        return
      }
      // if (this.phone.toString().length < 7 || this.phone.toString().length > 12) {
      //   this.$toast.fail(this.$t('new.doc8'));
      //   return;
      // }
      this.send_code()
    },

    send_code() {
      //判断在不在60秒内
      if (this.time_status) {
        //this.$toast("操作频繁.晚点再试");
        this.$toast.success(this.$t('page.doc44'))
      } else {
        if (this.cid == 0) {
          if (
              this.mobile.toString().length < 6 &&
              this.mobile.toString().length < 13
          ) {
            //this.$toast("请输入正确的手机号");
            this.$toast.fail(this.$t('page.doc45'))
            return
          }
        } else {
          if (!mailReg.test(this.mobile.replace(/\s+/g, ''))) {
            //this.$toast(this.$t('page.doc46'));
            this.$toast.fail(this.$t('page.doc46'))
            return
          }
        }

        var send_api = this.URL.user.code_send
        var send_arr = {
          accountType: this.cid,
          prefix: this.areaId,
          account: this.mobile.replace(/\s*/g, ''),
          type: 6, // 设置/更新密码
          captchaKey: this.captchaKey,
          captchaCode: this.cap,
        }

        this.$post(send_api, send_arr).then((res) => {
          if (res.code == 0) {
            this.$toast.success(this.$t('page.doc47'))
            // this.code = res.data.code
            this.time_show = true
            this.time_status = true
            this.$refs.countDown.reset()
            this.$refs.countDown.start()
          } else {
            this.$toast(res.message)
          }
        })
      }
    },

    area_set(id) {
      this.areaId = id
      this.if_area = false
    },
    getArea() {
      // this.if_area = true
      this.$post(this.URL.user.country_list, {}).then((res) => {
        if (res.code == 0) {
          this.areaData = res.data
          this.areaId = res.data[0].mobilePrefix
        } else {
          this.$toast(res.message)
        }
      })
    },

    onBtn:antiShake(function(){
      // this.isDisable = true
      // setTimeout(() => {
      //   this.isDisable = false
      // }, 2000)

      // if (!this.isDisable) {
      //   return
      // }



      if (
          !this.cid&&this.mobile.toString().length < 6 &&
          this.mobile.toString().length < 13
      ) {
        //this.$toast("请输入正确的手机号");
        this.$toast.fail(this.$t('page.doc45'))
        return
      }

      if (this.cid&&!mailReg.test(this.mobile.replace(/\s+/g, ''))) {
        this.$toast.fail(this.$t('page.doc46'))
        return;
      }
      let re = new RegExp(reg)
      if (re.test(this.password)) {
      } else {
        //密码应为6-20位字母、数字组合字符
        this.$toast(this.$t('page.doc48'))
        return
      }

      // if (this.password != this.s_password) {
      //   // 两次密码输入不一致
      //   this.$toast(this.$t('page.doc49'))
      //   return
      // }

      this.$post(this.URL.user.forget, {
        accountType:this.cid, //送验证码的账号类型(0-手机 / 1-邮箱)
        prefix:this.areaId, //手机号码前缀 (accountType=0 时必填)
        account:this.mobile, //手机号/邮箱
        code:this.code, //验证码 (验证码类型: 3)
        password:this.$md5(this.password)
      }).then((res) => {
        if (res.code == 0) {
          this.$toast(res.message);
          this.path_url('/user/login')
        } else {
          this.$toast(res.message);
        }
      });



    }),
    path_url(url, id) {
      this.$router.push({
        path: url,
        query: {},
      })
    },
  },
}
</script>

<style lang="less" scoped>
.box1 {
  height: 243px;
}

.box3 {
  padding: 30px 20px 0;
  font-size: 16px;
  color: #8FE1D1;
  margin-bottom: 16px;

  div:first-child {
    font-weight: 600;
    margin-bottom: 10px;
  }
}

.home {
  min-height: 100vh;
  background: #091917 url("../../assets/images/login/wjmm-bg.png") no-repeat top center;
  background-size: 100%;
  padding-bottom: 20px;
}
.head {
  padding: 0.22rem 0;
  .container{
    .db{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      font-size: .34rem;
      color: #FFFFFF;
      img{
        height: .44rem;
      }
    }
  }
}
.logo{
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  .title{
    font-size: 18px;
    font-weight: 600;
    padding-left: 24px;
    //line-height: .62rem;
    //padding: .48rem 0rem .35rem .28rem;
    //.bot{
    //  width: 1.68rem;
    //  height: .15rem;
    //  background: linear-gradient(90deg, #FE4263 0%, rgba(254,66,99,0) 100%);
    //}
  }
  ul{
    padding: 0rem .32rem;
    //background: #fff;
    border-radius: .2rem;
    margin: .25rem 0rem;
    li{
      border: 1px solid #38664e;
      padding: 13px;
      border-radius: 8px;
      margin-bottom: 13px;
      //padding: .38rem 0rem .28rem 0rem;
      .name{
        font-size: .28rem;
        color: #000;
        margin-bottom: 0.22rem;
      }
      .input{
        display: flex;
        align-items: center;
        input{
          width: 100%;
          height: 0.38rem;
          font-size: .28rem;
          font-weight: 400;
          text-align: left;
          color: #000;
          background: none;
          border: 0;

          &::placeholder {
            color: #7a7a7a;
          }
        }
        .in{
          flex: 1;
        }
        .str{
          //background: var(--CObackgroundLinear1);
          border-radius: .3rem;
          padding: .12rem .24rem;
          color: #10FD61;
          text-align: center;
          font-size: .24rem;
          font-weight: 400;
          /deep/ .van-count-down {
            color: #10FD61;
          }
        }
      }
    }
  }
  .btn{
    width: 90%;
    font-size: .3rem;
    font-weight: 500;
    color: var(--COborder3);
    border: 0;
    text-align: center;
    padding: .25rem 0rem;
    background: linear-gradient(90deg, rgba(12,35,29,1) 0%, rgba(7,77,46,1) 50%, rgba(0,52,30,1) 100%);
    border-radius: 8px;
    border: 1px solid #38664e;
  }
}

.container {
  color: #989898;
}

.box {
  height: 70vh;
  width: 100%;
  .flex {
    width: 100%;
  }
  .info {
    padding: 0 .2rem;
  }
  ul {
    padding-top: 1rem;
    width: 100%;
    li {
      height: .88rem;
      background: rgba(0,0,0,0.57);
      border-radius: .44rem;
      margin-bottom: .4rem;
      padding: 0 .5rem;
      .area_name {
        border-right: .02rem solid #989898;
        padding-right: .2rem;
        margin-right: .2rem;
        i {
          font-size: .24rem;
          margin-left: .06rem;
        }
      }
      .str {
        height: .88rem;
        background: #585b5e;
        border-radius: 44px;
        margin-right: -.5rem;
        line-height: .88rem;
        padding: 0 .4rem;
        color: #fff;

        /deep/ .van-count-down {
          color: #fff;height: .88rem;line-height: .88rem;
        }

      }
      input {
        width: 100%;
        height: .38rem;
        font-size: .28rem;
        font-weight: 400;
        text-align: left;
        color: #989898;
        background: none;
        border:0;
      }
    }
  }
}

.bottom {
  .txt {
    margin-top: .4rem;
    text-align: center;
    p {
      padding-bottom: .2rem;
    }

  }
  /deep/ .van-checkbox__label {
    color: #9BA0A5;
    font-size: .24rem;
  }
  /deep/ .van-checkbox {
    justify-content:center;

  }
}

</style>
